<template>
    <div class="preview">
    <template v-for="config in list" :key="config.id">
                <component :is="config.package" :config="config"/>
    </template>
    </div> 
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue';
import { componentInstall } from '@/materials';
import type { ComponentType } from '@/materials/index.d';
defineOptions({
    name: "Preview"
});

const list = ref<ComponentType[]>([])

onMounted(async ()=>{
    const componentList: ComponentType[] = JSON.parse(sessionStorage.getItem("componentList")!);
    // componentList.forEach(async (component) => {
    //     await componentInstall(component as any);
    // });
    for (let i = 0; i < componentList.length; i++) {
        const component = componentList[i] as any;
        await componentInstall(component);
    }
    list.value = componentList;
});
</script>

<style lang="scss" scoped>
.preview {
    width: 100%;
    height: 100%;
    background-color: #fff;
}
</style>